<template>
<div class="big-box">
    <header class="title">
        <h2>图书馆数字可视化大屏</h2>
    </header>
    <section class="box">
        <router-link to="/one">
        <section class="left" @click="goShowData()">
            <page class="title1">
                广东省藏馆与读者数量量
                <one1></one1>
            </page>
            <page class="title1">
                全国图书馆日均人流量数据
                <two1></two1>
            </page>
        </section>
        </router-link>
        <section class="center">
            <mapPage />
        </section>
        <router-link to="/two">
        <section class="right" @click="goShowData()">
            <page class="title1">
                数量占比
                <three1></three1>
            </page>
            <page class="title1">
                全国图书流通
                <four1></four1>
                
            </page>
        </section>
        </router-link>
        
    </section>
</div>
</template>

<script>
import page from "@/components/slot.vue"

import one1 from "@/components/one1.vue"
import two1 from "@/components/two1.vue"
import three1 from "@/components/three1.vue"
import four1 from "@/components/four1.vue"

import mapPage from "@/components/mapPage.vue"



import {inject} from "vue"
export default {
    components:{
        page,
        one1,
        two1,
        three1,
        four1,
        mapPage
       
    },
    setup(){
        let $echarts =inject("echarts")
        console.log($echarts)
    },
    methods:{
        goShowData(){
            this.$router.push('/one')
            // this.$router.push('/two')
        }
        
    }

}
</script>

<style lang="less">

    header{
    height: 1.2rem;
    width: 100%;
    // background-color:rgba(0,0,250,0.2);
    background: url("../assets/可视化/title.png");
    h2{
    font-size: 0.6rem;
    color: aliceblue;
    text-align: center;
    line-height: 1.2rem;
}
}
.box{
    min-width: 1200px;
    max-width: 2560px;
    margin: 0 auto;
    padding: .125rem .125rem 0;
    display: flex;
.left,.right{
    flex: 3.1;
} 
.center{
    flex: 5;
    height: 10.5rpx;
    border: 1px solid blue;
    padding: 2px;
    margin: 0.25rem;
    background-color: rgba(0, 150, 250, 0.1);
}
.title1{
    text-align: center;
    font-size: 18px;
    color: aliceblue;
    


}
}




</style>